<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01-刷底色</title>
		<style type="text/css">
			body {
				margin: 0;
				overflow: hidden;
			}
			#canvas {
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script type="module">
			import { Color } from "https://unpkg.com/three/build/three.module.js";
			const canvas = document.querySelector("#canvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			
			const gl = canvas.getContext("webgl");
			gl.clearColor(0, 0, 0, 1);
			gl.clear(gl.COLOR_BUFFER_BIT);
			
			// // css 颜色
			// const rgbaCss = "rgba(255,100,0,1)";
			// const reg = RegExp(/\((.*)\)/);
			// // 捕抓数据
			// const rgbaStr = reg.exec(rgbaCss)[1];
			// const rgba = rgbaStr.split(',').map(v => parseInt(v));
			// const r = rgba[0] / 255;
			// const g = rgba[1] / 255;
			// const b = rgba[2] / 255;
			// const a = rgba[3];
			// gl.clearColor(r, g, b, a);
			// gl.clear(gl.COLOR_BUFFER_BIT);
			
			// 新建color对象
			const color =  new Color("rgba(255,100,0,1)");
			gl.clearColor(color.r, color.g, color.b, 1);
			gl.clear(gl.COLOR_BUFFER_BIT);
			// 色相偏移动画
			!(function ani() {
				color.offsetHSL(0.003, 0, 0);
				// 新建color对象
				gl.clearColor(color.r, color.g, color.b, 1);
				gl.clear(gl.COLOR_BUFFER_BIT);
				requestAnimationFrame(ani);
			}());
		</script>
	</body>
</html>